<template>
  <div class="app-container">
    <!-- 搜索 -->
    <el-card class="box-card">
      <el-row type="flex" align="middle">
        <el-col :span="12">
          <div class="grid-content bg-purple search">
            <el-form ref="query" :model="query" label-width="100px">
              <el-form-item style="margin-bottom:0px" label="名称">
                <i slot="label" class="el-icon-search" style="font-size:20px"></i>
                <el-input style="width:360px" v-model="query.keywords" placeholder="请输入盲盒名称"></el-input>
              </el-form-item>
            </el-form>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple-light" style="text-align:right">
            <el-button type="primary" @click="queryAsk">查询</el-button>
            <el-button @click="queryReset">重置</el-button>
          </div>
        </el-col>
      </el-row>
    </el-card>
    <!-- 表格 -->
    <el-card class="box-card">
      <el-button type="primary" style="margin-bottom:20px" @click="addList">添加</el-button>
      <el-table
        :data="tableData"
        :header-cell-style="{background:'#eee'}"
        border
        style="width: 100%;margin-bottom: 20px;"
        v-loading="loading"
      >
        <el-table-column align="center" type="index" width="50" label="序号"></el-table-column>
        <el-table-column align="center" label="盲盒图片">
          <template slot-scope="scope">
            <el-popover placement="top-start" title trigger="hover">
              <img :src="scope.row.img" alt style="max-width:150px" />
              <!-- <el-avatar shape="square" :size="150" fit="cover" :src="scope.row.img"></el-avatar> -->
              <el-avatar
                slot="reference"
                shape="square"
                :size="50"
                fit="scale-down"
                :src="scope.row.img"
              ></el-avatar>
              <!-- <img
                slot="reference"
                :src="scope.row.img"
                style="width: 60px;height: 60px"
              />-->
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="name" label="名称"></el-table-column>
        <el-table-column align="center" label="类型">
          <template slot-scope="scope">
            <div v-if="scope.row.type==1">天选之人</div>
            <div v-if="scope.row.type==2">无限盲盒</div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="上架">
          <template slot-scope="scope">
            <div v-if="scope.row.is_show==1">上架</div>
            <div v-if="scope.row.is_show==0">下架</div>
          </template>
        </el-table-column>

        <el-table-column align="center" prop="add_time" label="添加时间"></el-table-column>
        <el-table-column align="center" fixed="right" label="操作" width="150">
          <template slot-scope="scope">
            <el-popconfirm
              confirmButtonText="好的"
              cancelButtonText="不用了"
              icon="el-icon-info"
              iconColor="red"
              title="确定删除吗？"
              @onConfirm="handleDel(scope.row)"
            >
              <el-button
                style="margin-left:10px;color:red"
                slot="reference"
                type="text"
                size="small"
              >删除</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <div style="text-align:right">
        <el-pagination
          background
          layout="prev, pager, next"
          :current-page="currentPage"
          :total="total"
          @current-change="currentChange"
        ></el-pagination>
      </div>
    </el-card>
    <!-- 抽屉 -->
    <el-drawer title="选择盲盒" :visible.sync="drawer">
      <!-- 搜索 -->
      <el-card class="box-card">
        <div class="query-card">
          <!-- <el-row type="flex" align="middle">
          <el-col :span="12">-->
          <div class="grid-content bg-purple search">
            <el-form ref="boxquery" :model="query" label-width="100px">
              <el-form-item style="margin-bottom:0px" label="名称">
                <i slot="label" class="el-icon-search" style="font-size:20px"></i>
                <el-input style="width:360px" v-model="boxquery.keywords" placeholder="请输入盲盒名称搜索"></el-input>
              </el-form-item>
              <el-form-item style="margin-bottom:0px" label="分类">
                <el-select style="width:360px" v-model="boxquery.type" placeholder="请选择分类">
                  <el-option label="全部" value="0"></el-option>
                  <el-option label="天选之人" value="1"></el-option>
                  <el-option label="无限盲盒" value="2"></el-option>
                </el-select>
              </el-form-item>
            </el-form>
          </div>
          <!-- </el-col> -->
          <!-- <el-col :span="12"> -->
          <div class="grid-content bg-purple-light">
            <el-button type="primary" @click="boxqueryAsk">查询</el-button>
            <el-button @click="boxqueryReset">重置</el-button>
          </div>
          <!-- </el-col>
          </el-row>-->
        </div>
      </el-card>
      <el-card class="box-card">
        <el-table
          ref="multipleTable"
          :data="boxtableData"
          tooltip-effect="dark"
          border
          style="width: 100%;margin-bottom: 20px;"
          :header-cell-style="{background:'#eee'}"
          v-loading="boxloading"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" align="center" width="55"></el-table-column>
          <el-table-column align="center" prop="id" label="ID" width="55"></el-table-column>
          <el-table-column align="center" label="封面图片">
            <template slot-scope="scope">
              <el-popover placement="top-start" title trigger="hover">
                <img :src="scope.row.img" alt style="max-width:250px" />
                <!-- <el-avatar shape="square" :size="150" fit="cover" :src="scope.row.img"></el-avatar> -->
                <el-avatar
                  slot="reference"
                  shape="square"
                  :size="50"
                  fit="scale-down"
                  :src="scope.row.img"
                ></el-avatar>
                <!-- <img
                slot="reference"
                :src="scope.row.img"
                style="width: 60px;height: 60px"
                />-->
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="name" label="盲盒名称"></el-table-column>
          <el-table-column align="center" label="类型">
            <template slot-scope="scope">
              <div v-if="scope.row.type==1">天选之人</div>
              <div v-if="scope.row.type==2">无限盲盒</div>
              <div></div>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="price" label="单价"></el-table-column>
          <el-table-column align="center" prop="id" label="是否预售">
            <template slot-scope="scope">
              <div v-if="scope.row.is_ys==1">是</div>
              <div v-if="scope.row.is_ys==0">否</div>
            </template>
          </el-table-column>
        </el-table>

        <div style="text-align:right">
          <el-pagination
            background
            layout="prev, pager, next"
            :current-page="boxcurrentPage"
            :total="boxtotal"
            @current-change="boxcurrentChange"
          ></el-pagination>
        </div>
      </el-card>
      <div style="text-align:right;margin-top:20px">
        <el-button type="primary" @click="boxAdd">确定</el-button>
        <el-button @click="drawer=false">取消</el-button>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import {
  recommendationList,
  addRecommendationList,
  delRecommendationList
} from "@/api/system";
import { blinboxList } from "@/api/blindbox";
import { parseTime } from "@/utils/index";

export default {
  name: "Recommendation",
  data() {
    return {
      // 分页数据
      total: 0,
      currentPage: 1,
      pageSize: 10,
      //input
      query: {
        keywords: ""
      },
      tableData: [],
      loading: false,
      drawer: false,

      // 盲盒数据
      boxtotal: 0,
      boxcurrentPage: 1,
      boxpageSize: 10,
      //query
      boxquery: {
        keywords: "",
        type: "0"
      },
      boxtableData: [],
      selectList: [],
      boxloading: false
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    async getList() {
      this.loading = true;
      const res = await recommendationList({
        page: this.currentPage,
        limit: this.pageSize,
        keywords: this.query.keywords
      });
      console.log(res);
      this.loading = false;
      this.tableData = res.data;
      this.total = res.count;

      this.tableData.forEach(item => {
        if (item.add_time == 0) {
          item.add_time = "-";
        } else {
          item.add_time = parseTime(item.add_time, "{y}-{m}-{d} {h}:{i}:{s}");
        }
        if (item.update_time == 0) {
          item.update_time = "-";
        } else {
          item.update_time = parseTime(
            item.update_time,
            "{y}-{m}-{d} {h}:{i}:{s}"
          );
        }
      });
    },
    queryAsk() {
      this.currentPage = 1;
      this.getList();
    },
    //重置
    queryReset() {
      this.resetForm("query");
      this.total = 0;
      this.currentPage = 1;
      this.pageSize = 10;
      this.query.keywords = "";
      this.getList();
    },
    addList() {
      this.drawer = true;
      this.getBoxList();
    },
    async handleDel(row) {
      const res = await delRecommendationList({
        id: row.id
      });
      if (res.st == 1) {
        this.$message({
          message: "删除成功",
          type: "success"
        });
        this.getList();
      } else {
        this.$message.error("添加失败");
        console.log(res.msg);
      }
    },
    // 盲盒列表
    async getBoxList() {
      this.boxloading = true;
      const res = await blinboxList({
        page: this.boxcurrentPage,
        limit: this.boxpageSize,
        keywords: this.boxquery.keywords,
        type: this.boxquery.type,
        is_template: 0
      });
      console.log(res);
      this.boxloading = false;
      this.boxtableData = res.data;
      this.boxtotal = res.count;
    },
    boxqueryAsk() {
      console.log(this.boxquery);
      this.boxcurrentPage = 1;
      this.getBoxList();
    },
    boxqueryReset() {
      this.resetForm("boxquery");
      this.boxtotal = 0;
      this.boxcurrentPage = 1;
      this.boxpageSize = 10;
      this.boxquery.keywords = "";
      this.boxquery.type = "0";
      this.getBoxList();
    },
    //分页改变
    currentChange(current) {
      this.currentPage = current;
      this.getList();
    },
    // 重置表单
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.drawer = false;
    },
    //盲盒分页改变
    boxcurrentChange(current) {
      this.boxcurrentPage = current;
      this.getBoxList();
    },
    handleSelectionChange(val) {
      console.log(val);
      this.selectList = val;
    },
    // 确认添加
    boxAdd() {
      let sure = [];
      this.selectList.forEach(async item => {
        const res = await addRecommendationList({
          box_id: item.id
        });
        if (res.st == 1) {
          this.$message({
            message: "添加成功",
            type: "success"
          });
          this.drawer = false;
          this.getList();
        } else {
          this.$message.error("添加失败");
          console.log(res.msg);
        }
      });

      //   if (!sure.includes(2)) {
      //   } else {
      //     this.drawer = false;
      //     this.getList();
      //   }
    }
  }
};
</script>

<style lang="scss" scoped>
.query-card {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.box-card {
  margin-bottom: 20px;
}
.search {
  display: flex;
  align-items: center;
}
::v-deep .el-drawer.rtl {
  width: 50% !important;
  overflow: auto;
}
.query-card {
  ::v-deep .el-form {
    display: flex;
  }
}
.el-dropdown {
  vertical-align: top;
}
.el-dropdown + .el-dropdown {
  margin-left: 15px;
}
.el-icon-arrow-down {
  font-size: 12px;
}
</style>